<template>

<div>
   <view class="searchPP">
      <img
        @click="goBackM"
        style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem"
        src="../../style/image/cargo/leftarow.jpg"
        alt=""
      />
      <view class="searchP">
        <view class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入商户姓名或电话"
            shape="round"
            v-model="keyword"
            :show-action="false"
          ></u-search>
        </view>
      </view>

       <view
        class="slot-right"
        style="display: flex; justify-content: flex-end"
      >
        <img
          @click="goShopCarM"
          style="width: 1rem; padding: 0.2rem"
          src="../../style/image/my/A39.png"
          alt=""
        />
      </view>
    </view>


      <div class="definite">


        <div class="definite-foot">
        <u-tabs-swiper
      ref="tabs"
      :list="list"
      active-color="#4dbf92"
      font-size="0.7rem"
      count="count"
      height="80"
      :is-scroll="false"
      :current="current"
      bar-width="100"
      gutter="80"
      @change="tabsChange"
    >
    </u-tabs-swiper>

    <div  style="background-color: white;margin-right: 0.2rem;" >
     <div style="display: flex;
align-items: center;padding: 0.2rem 0rem;">
     <div style="">价格</div>
    <img style="width: 0.6rem;height: 1.4rem;" src="../../style/image/my/A40.png" alt="">
     </div>

    </div>
        
        </div>
    
    <div class="item">
        <div   class="item-one" v-for="(item,index) in showData"  :key="index" >
            <div  @click="sureOrderM"  >
                <img class="goods-img" src="../../style/image/my/A33.jpg" alt="">
            </div>
            <div class="name">{{item.a}}</div>
            <div class="num">销量{{item.b}}</div>
            <div>
                <span class="money">¥{{item.c}}</span>
                <span>
                    <img class="shoppingCart" src="../../style/image/my/A41.png" alt="">
                </span>
            </div>
        </div>
     
    </div>
  </div>

</div>



</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  public list = [
    {
      name: "UC800",
      ate_count: 5,
    },
    {
      name: "UC800",
      ate_count: 5,
    },
    {
      name: "UC800",
      ate_count: 5,
    },
    {
      name: "UC800",
      ate_count: 5,
    }

  ]

  public showData=[
        {
            a:'包小宝充电宝宝充电宝',
            b:'8900',
            c:'300'
        },
          {
            a:'包小宝充电123',
            b:'8900',
            c:'300'
        },  {
            a:'包小宝充电宝宝充电宝',
            b:'8900',
            c:'300'
        },  {
            a:'包小宝充电宝宝充电宝',
            b:'8900',
            c:'300'
        },  {
            a:'包小宝充电宝宝充电宝',
            b:'8900',
            c:'300'
        }
  ]

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }

   goShopCarM(){
         uni.navigateTo({
    url: './goodsCar'
    });
   }
    goBackM(){
     uni.navigateTo({
    url: '../home/home'
    });
      
   }


   sureOrderM(){

    uni.navigateTo({
    url: '../order/sureOrder'
    });
   
   }
}
</script>

<style  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.item {
   display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item-one {
    float: left;
    position: relative;
    background: #FFFFFF;
    width: 8.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.goods-img {
    width: 8.5rem;
height: 8.5rem;
border-radius: 0.4rem 0.4rem 0 0;
}
.name {
    width: 7.68rem;
font-size: 0.75rem;
padding-left: 0.3rem;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}
.num {
    padding-left: 0.3rem;
font-size: 0.6rem;
line-height: 1.5rem;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
}
.money { 
font-size: 1rem;
padding-left: 0.3rem;
font-family: Myriad Pro;
font-weight: 400;
color: #FF0000;
line-height: 2.46rem;
}
.shoppingCart {
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    width: 1.63rem;
    height: 1.63rem;
}

.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.definite-foot{

     display: flex;
}
</style>